<template>
  <div>
    <!-- 头部 -->
    <user-header :headerData="headerData" @show="_show_qrcode()"></user-header>
    <!-- 导航 员工中心-->
    <user-nav :memberData="memberData" :current="2"></user-nav>
    <!-- 提现 -->
    <div class="accountPanel-links">
      <section class="accountPanel">
        <div class="iner-bor">
          <!-- <div @click="Jump('commissionContent')"> -->
          <div>
            <div class="item fl">
              <!-- <i class="fontAliBaba" v-html="scaleGoodsPriceNoMarkFn(remaining_commission)"></i> -->
              <i class="fontAliBaba" v-if="parseFloat(remaining_commission)" v-html="scaleGoodsPriceNoMarkFn(remaining_commission)"></i>
              <i class="fontAliBaba price-scale " v-else><span class="num-font">{{remaining_commission}}</span></i>
              <p>{{ftitle_commission_left}}</p>
            </div>
            <div class="item fl">
              <!-- <i class="fontAliBaba" v-html="scaleGoodsPriceNoMarkFn(wait_commission)"></i> -->
              <i class="fontAliBaba" v-if="parseFloat(wait_commission)" v-html="scaleGoodsPriceNoMarkFn(wait_commission)"></i>
              <i class="fontAliBaba price-scale" v-else><span class="num-font">{{wait_commission}}</span></i>
              <p>待收益</p>
            </div>
          </div>
          <span @click="Jump('myCommission')" class="fr btn-sign">
            <i></i>提现
          </span>
        </div>
        <div class="line-bor"></div>
      </section>
      <div class="style2-links clearfix">
        <div @click="Jump('staff-goods')" class="link" v-if="show_yg_product">
          <span class="num fontAliBaba">{{staff_goods_count}}</span>
          <span class="title">{{ftitle_staff_goods}}</span>
        </div>
        <div @click="Jump('staff-level-agent')" class="link" v-if="show_yg_fxs">
          <span class="num fontAliBaba">{{next_lever_agent_count}}</span>
          <span class="title">{{ftitle_agents}}</span>
        </div>
        <div @click="Jump('staff-level-user')" class="link" v-if="show_yg_user">
          <span class="num fontAliBaba">{{staff_user_count}}</span>
          <span class="title">{{ftitle_staff_user}}</span>
        </div>
        <div @click="Jump('staff-order')" class="link" v-if="show_yg_purchase_order">
          <span class="num fontAliBaba">{{fenxiao_order_count}}</span>
          <span class="title">团队订单</span>
        </div>
      </div>
    </div>
    <!-- 我的服务 -->
    <!-- <div v-if="wxConfig.template_style == 1 || template_style == 1" style="display: none;">{$random_content}</div> -->
    <div v-if="wxConfig.template_style == 1 || template_style == 1" class="mainmodule">
      <div class="mianad" v-if="staffInfo.is_user_img">
        <a @click="openLink(staffInfo.user_img_link)">
          <img v-if="staffInfo.user_img_ggt" :src="staffInfo.user_img_ggt" alt />
          <img v-else :src="ad_img" alt />
        </a>
      </div>
      <div class="mainlist">
        <ul>
          <li v-if="(jxgzl_dz == 1 || staffInfo.show_yg_code) && is_wx==1">
            <div @click="clickWxcode" class="icon_ewm">
              {{staffInfo.show_yg_code ? '扫码核销':'微信扫码'}}
              <i class="icon-right"></i>
            </div>
          </li>
          <li v-if="staffInfo.show_yg_commission">
            <div @click="Jump('myCommission')" class="icon_wdyj">
              {{staffInfo.ftitle_commission}}
              <i class="icon-right"></i>
            </div>
          </li>
          <li v-if="staffInfo.display_agent_sort && staffInfo.show_yg_lastCommission">
            <div @click="Jump('commissionSort')" class="icon_syyjph">
              {{staffInfo.ftitle_ranking}}
              <i class="icon-right"></i>
            </div>
          </li>
          <li v-if="staffInfo.display_agent_sort && staffInfo.show_yg_lastCommission">
            <div @click="Jump('director')" class="icon_wdsj">
              {{staffInfo.ftitle_superior}}
              <span v-if="staffInfo.superior_user">{{staffInfo.superior_user}}</span>
              <i class="icon-right"></i>
            </div>
          </li>
          <li v-if="showShareLinkStaff">
            <div @click="Jump('/shareSelect')" class="icon20_1_fx">
              万能链接
              <i class="icon-right"></i>
            </div>
          </li>
          <!-- 视频号数据 -->
          <li v-if="staffInfo.show_video_num_data_staff">
            <div @click="Jump('venderOrder', {type: 'live'})"
                 class="icon_sphsj">视频号数据
              <span></span>
              <svg-icon icon-class="icon_right"
                        class="icon_right"></svg-icon>
            </div>
          </li>
        </ul>

        <!-- 自定义项 -->
        <ul v-if="staffInfo.dataset_staff && staffInfo.dataset_staff.length>0">
          <li v-for="(item,index) in staffInfo.dataset_staff"
              :key="index">
            <a :href="item.link"
              class="custom_item"
              :style="{backgroundImage: 'url('+item.pic+')'}">
              {{item.showtitle}}
              <svg-icon icon-class="icon_right"
                        class="icon_right"></svg-icon>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div v-else-if="wxConfig.template_style == 2 || template_style == 2" class="style2-actions clearfix mgt10">
      <div class="style2-actions-title">我的服务</div>
      <div @click="clickWxcode" v-if="(jxgzl_dz == 1 || staffInfo.show_yg_code) && is_wx==1" class="action">
        <span class="icon-action icon2_15"></span>
        <span class="title">{{staffInfo.show_yg_code ? '扫码核销':'微信扫码'}}</span>
      </div>
      <div @click="Jump('myCommission')" v-if="staffInfo.show_yg_commission" class="action">
        <span class="icon-action icon2_9"></span>
        <span class="title">{{staffInfo.ftitle_commission}}</span>
      </div>
      <div @click="Jump('commissionSort')" v-if="staffInfo.display_agent_sort && staffInfo.show_yg_lastCommission" class="action">
        <span class="icon-action icon2_10"></span>
        <span class="title">{{staffInfo.ftitle_ranking}}</span>
      </div>
      <div @click="Jump('director')" v-if="staffInfo.display_agent_sort && staffInfo.show_yg_lastCommission" class="action">
        <span class="icon-action icon2_13"></span>
        <span class="title">{{staffInfo.ftitle_superior}}</span>
        <span class="subtitle">{{staffInfo.superior_user}}</span>
      </div>
      <div @click="Jump('/shareSelect')" v-if="showShareLinkStaff" class="action">
        <span class="icon-action icon20_1_fx"></span>
        <span class="title">万能链接</span>
      </div>
      <!-- 视频号数据 -->
      <div @click="Jump('venderOrder', {type: 'live'})" class="action" v-if="staffInfo.show_video_num_data_staff">
        <span class="icon-action icon_sphsj"></span>
        <span class="title">视频号数据</span>
      </div>
      <!-- 自定义项 -->
      <div v-if="staffInfo.dataset_staff && staffInfo.dataset_staff.length>0"
            v-for="(item,index) in staffInfo.dataset_staff"
            :key="index"
            class="action">
        <a @click="openLink(item.link)">
          <span class="icon-action"
                :style="{backgroundImage: 'url('+item.pic+')',backgroundSize:'cover'}"></span>
          <span class="title">{{item.showtitle}}</span>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import userNav from '@/views/user/components/nav/index'
import userHeader from '@/views/user/components/header/index'
// import bg_img from '@img/user/member/user_style3_bg_black.png'
// import user_img from '@img/user/userimg.png'
import { getStaffCenter } from '@/api/user/fxs/fxsApi'
import { getCommissionIncome } from '@/api/user/user'
import { scaleGoodsPriceNoMark } from '@/utils/index.js'

import Vue from 'vue'
import { openPage } from '@/utils/utils.js'
export default Vue.extend({
  data() {
    return {
      template_style: '',
      memberData: {},
      headerData: {
        bgImg: 'https://img.wifenxiao.com/h5-wfx/images/user/member/user_style3_bg_black.png',
        userImg: 'https://img.wifenxiao.com/h5-wfx/images/user/userimg.png',
        nickname: '',
        mobile: '',
        show_level: true,
        rank_name: '',
        end_time: '',
        letterCount: 0,
        show_qrcode: false,
        dls_area: '',
        ftitle_agency_area: ''
      },
      staffInfo: {},

      qrcode_url: '',
      show_qrcode: true,
      remaining_commission: '--',
      ftitle_commission_left: '',
      wait_commission: '--',

      show_yg_product: true,
      staff_goods_count: 0,
      ftitle_staff_goods: '',
      show_yg_fxs: true,
      next_lever_agent_count: 0,
      ftitle_agents: '',
      show_yg_user: true,
      staff_user_count: 0,
      ftitle_staff_user: '',
      show_yg_purchase_order: true,
      fenxiao_order_count: 0,
      showShareLinkStaff: '',

      is_wx: 0,
      jxgzl_dz: ''
    }
  },
  computed: {
    ...mapGetters(['wxConfig'])
  },
  created() {
    this.init()
  },
  methods: {
    // TODO 小程序跳转
    openLink(link) {
      openPage(link)
    },
    init() {
      this.$loadingWrap.show()
      getStaffCenter().then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          const resData = res.data
            wx.setNavigationBarTitle({
              title: res.data.common_center_parameter.staff_name
            })
          // TODO 小程序处理 wxConfig.template_style
            resData.template_style ? this.template_style = resData.template_style : ''

          // 导航数据
          this.memberData = Object.assign(resData.common_center_parameter, resData.common_center_renovation_parameter)
          this.memberData.user_type = resData.user_identity.user_type
          this.memberData.is_agent = resData.user_identity.is_agent
          this.memberData.is_show_distributor = resData.is_show_distributor
          this.memberData.system_function_model = resData.system_function_model
          this.memberData.is_check_dhs = resData.is_check_dhs
          this.memberData.is_show_dhs = resData.is_show_dhs
          this.memberData.is_wx = resData.is_wx
          this.memberData.is_app = resData.is_app
          this.memberData.is_show_agent = resData.is_show_agent
          this.memberData.is_show_gys = resData.is_show_gys
          this.memberData.supplier_flag = resData.supplier_flag
          this.memberData.is_tgy = resData.is_tgy
          this.memberData.is_dls = resData.is_dls
          this.memberData.ftitle_gys_center = resData.ftitle_gys_center
          //  头部数据
          if (resData.common_center_renovation_parameter.top_bg != '') {
            this.headerData.bgImg = resData.common_center_renovation_parameter.top_bg
          }
          this.headerData.userImg = resData.common_center_parameter.avatar
          this.headerData.nickname = resData.user_info.nickname
          this.headerData.mobile = resData.user_info.mobile
          this.headerData.show_level = resData.show_level
          this.headerData.rank_name = resData.staff_rank_name
          this.headerData.letterCount = resData.common_center_parameter.letterCount
          // this.headerData.show_qrcode = resData.common_center_renovation_parameter.show_qrcode
          this.qrcode_url = resData.qrcode_url
          //  link数据
          // this.remaining_commission = resData.user_info.remaining_commission
          this.ftitle_commission_left = resData.common_center_parameter.ftitle_commission_left
          // this.wait_commission = resData.wait_commission
          this.show_yg_product = resData.show_check_staff.show_yg_product
          this.staff_goods_count = resData.staff_goods_count
          this.ftitle_staff_goods = resData.common_center_parameter.ftitle_staff_goods
          this.show_yg_fxs = resData.show_check_staff.show_yg_fxs
          this.next_lever_agent_count = resData.next_lever_agent_count
          this.ftitle_agents = resData.common_center_parameter.ftitle_agents
          this.show_yg_user = resData.show_check_staff.show_yg_user
          this.staff_user_count = resData.staff_user_count
          this.ftitle_staff_user = resData.common_center_parameter.ftitle_staff_user
          this.show_yg_purchase_order = resData.show_check_staff.show_yg_purchase_order
          this.fenxiao_order_count = resData.fenxiao_order_count
          this.showShareLinkStaff = resData.common_center_renovation_parameter.showShareLinkStaff

          // 图标数据
          // this.staffInfo = Object.assign(resData.common_center_parameter, resData.show_check_staff)
          this.staffInfo = Object.assign(resData.common_center_parameter, resData.show_check_staff, { dataset_staff: resData.dataset_staff })
          // 其他
          this.is_wx = resData.is_wx
          this.jxgzl_dz = resData.jxgzl_dz
        } else {
          this.$Error(res.msg)
        }
      })
      getCommissionIncome().then(res => {
        if (res.status == 1) {
          this.remaining_commission = res.data.remaining_commission
          this.wait_commission = res.data.wait_commission
        } else {
          this.$Error(res.msg)
        }
      })
    },

    Jump(url, type) {
      this.$JumpPath(this, url, type)
    },
    scaleGoodsPriceNoMarkFn(price) {
      return scaleGoodsPriceNoMark(price)
    },
    // 定制微信扫码
    clickWxcode() {
        wx.scanCode({
          success: (res) => {
            // console.log(res)
            openPage(res.result)
          }
        })
    }
  },
  components: {
    userNav,
    userHeader
  }
})
</script>

<style lang="scss">
@import 'src/styles/user/index.scss';
</style>
